<template>
  <el-dialog title="添加收费道路" :visible.sync="visible" :before-close="closeHandle" center>
    <el-container>
      <el-main>
    <el-form size="mini" :rules="rules" label-width="86px" :label-position="'left'":model="addRoadForm" ref="addRoadForm">
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="道路名称" prop="road_name">
            <el-input v-model="addRoadForm.road_name" type="text" placeholder="道路名称"/>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="所属辖区" prop="ssdw">
            <el-input v-model="addRoadForm.ssdw" @click.native="openArea" type="text" placeholder="所属辖区"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item prop="location" label="停车位置">
            <el-select placeholder="停车位置" v-model="addRoadForm.location">
              <el-option v-for="item in park_location" :key="item.id" :value="item.id"
                         :label="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item prop="time" label="停车时段">
            <el-select placeholder="停车时段" v-model="addRoadForm.time">
              <el-option v-for="item in park_time" :key="item.id" :value="item.id" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="停车场数" prop="park_num">
            <el-input v-model="addRoadForm.park_num" type="number" placeholder="停车场数"/>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="泊位数" prop="berth_num">
            <el-input type="number" v-model="addRoadForm.berth_num" placeholder="泊位数"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="起止地点" prop="start_end">
            <el-input v-model="addRoadForm.start_end"  type="text" placeholder="起止地点"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="起点经度" prop="start_lon">
            <el-input v-model="addRoadForm.start_lon" type="text" placeholder="起点经度"/>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="起点纬度" prop="start_lat">
            <el-input v-model="addRoadForm.start_lat" type="text" placeholder="起点纬度"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="终点经度" prop="end_lon">
            <el-input v-model="addRoadForm.end_lon" type="text" placeholder="终点经度"/>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item label="终点纬度" prop="end_lat">
            <el-input v-model="addRoadForm.end_lat" type="text" placeholder="终点纬度"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item prop="type" label="道路类型">
            <el-select placeholder="道路类型" v-model="addRoadForm.type">
              <el-option v-for="item in road_type" :key="item.id" :value="item.id" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12">
          <el-form-item prop="is_fan" label="是否师范路">
            <el-select placeholder="是否师范路" v-model="addRoadForm.is_fan">
              <el-option v-for="item in road_kind" :key="item.id" :value="item.id" :label="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row>-->
        <!--<el-col :xs="12" :sm="12" :lg="12">-->
          <!--<el-form-item label="备注" prop="remark">-->
            <!--<el-input v-model="addRoadForm.remark" type="text" placeholder="备注"/>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
      <!--</el-row>-->
    </el-form>
      </el-main>
    </el-container>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="btn-search" @click="submitForm('addRoadForm')">确定</el-button>
      <el-button class="btn-search" @click="resetForm('addRoadForm')">重置</el-button>
    </div>
    <department :extraParam="extraParam"
                :dialogDwVisible.sync="dwVisible"
                :dwLoading.sync="dwLoading"
                @setDepartment="dwName"></department>
  </el-dialog>
</template>

<script>
  import {selDictonary} from '../../../api/dictionary'
  import {addTollRoad} from '../../../api/parkingResource/tollRoad'
  import Department from '../../common/sysorg/department'
  import ElContainer from "element-ui/packages/container/src/main";
  import ElMain from "element-ui/packages/main/src/main";

  export default {
    name: 'tollRoadAdd',
    components: {
      ElMain,
      ElContainer,
      Department},
    data() {
      return {
        extraParam: {
          lovtype: 'orgtype',
          level: null,
          orgtype: '1',
          p_org: null,
          getSelfOrg: null
        },
        dwVisible: false,
        dwLoading: true,
        visible: false,
        park_location: [],
        park_time: [],
        road_type: [],
        road_kind: [],
        addRoadForm: {
          road_name: '',
          ssdw_no: '',
          ssdw: '',
          location: '',
          type: '',
          park_num: '',
          berth_num: '',
          start_end: '',
          start_lon: '',
          start_lat: '',
          end_lon: '',
          end_lat: '',
          time: '',
          is_fan: '',
          remark: ''
        },
        rules: {
          road_name: [
            {required: true, message: '道路名称为空', trigger: 'blur'}
          ],
          ssdw: [
            {required: true, message: '所属辖区为空', trigger: 'change'}
          ],
          location: [
            {required: true, message: '停车位置为空', trigger: 'blur'}
          ],
          time: [
            {required: true, message: '停车时段为空', trigger: 'change'}
          ],
          start_lon: [
            {required: true, message: '起点经度为空', trigger: 'blur'}
          ],
          start_lat: [
            {required: true, message: '终点经度为空', trigger: 'blur'}
          ],
          end_lon: [
            {required: true, message: '起点维度为空', trigger: 'blur'}
          ],
          end_lat: [
            {required: true, message: '终点维度为空', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '道路类型为空', trigger: 'blur'}
          ],
          is_fan: [
            {required: true, message: '是否师范路为空', trigger: 'blur'}
          ]
        }
      }
    },
    props: ['addRoadVisible'],
    mounted() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'ori') {
            this.park_location = content[i].comboboxDetailList
          } else if (content[i].id === 'tcsd') {
            this.park_time = content[i].comboboxDetailList
          } else if (content[i].id === 'roadkind') {
            this.road_kind = content[i].comboboxDetailList
          } else if (content[i].id === 'roadtype') {
            this.road_type = content[i].comboboxDetailList
          }
        }
      })
    },
    watch: {
      addRoadVisible(val) {
        this.visible = val
      },
      visible(val) {
        this.$emit('update:addRoadVisible', val)
      }
    },
    methods: {
      closeHandle() {
        this.visible = false
      },
      openArea() {
        this.dwVisible = true
      },
      submitForm(addSpaceForm) {
        this.$refs[addSpaceForm].validate((valid) => {
          if (valid) {
            addTollRoad(this.addRoadForm).then(res => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.visible = false
              this.addRoadForm.ssdw_no = ''
              this.$refs[addSpaceForm].resetFields()
              this.$emit('reSelectRoad', 1)
            })
          }
        })
      },
      resetForm(addSpaceForm) {
        this.$refs[addSpaceForm].resetFields()
        this.addRoadForm.ssdw_no = ''
      },
      dwName(val) {
        this.addRoadForm.ssdw_no = val.orgno
        this.addRoadForm.ssdw = val.orgname
      }
    }
  }
</script>

<style scoped>
  .el-footer {
    text-align: center;
  }
</style>
